<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/tabImg.css">
	</head>
	<body>
		<div class="box">
			<img id="img" src="">
			<div id="text"></div>
			<a id="prev" href="#" class="left"></a>
			<a id="next" href="#" class="right"></a>
		</div>
		
		<script>
			let oImg = document.getElementById('img');
			let oText = document.getElementById('text');
			let oPrev = document.getElementById('prev');
			let oNext = document.getElementById('next');
			// 准备图片
			let imgSrc = ['./images/bg1.jpg','./images/bg2.jpg','./images/bg3.jpg','./images/bg4.jpg'];
			// 准备图片描述
			let imgDec = ['魔方','日本小妞','月光树','夕阳'];
			
			// 初始化页面
			let i = 0;
			function init(){
				oImg.src = imgSrc[i];
				oText.innerHTML = imgDec[i];
				oPrev.innerHTML = (i + 1) + '/' + imgSrc.length;
				oNext.innerHTML = (i + 1) + '/' + imgSrc.length;
			}
			init();
			
			oNext.onclick = function(){
				i = i + 1;
				if(i == imgSrc.length){
					i = 0;
				}
				init();
			}
			
			oPrev.onclick = function(){
				i = i - 1;
				if(i == -1){
					i = imgSrc.length - 1;
				}
				init();
			}
		</script>
	</body>
</html>
